<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->
<template>
	<!-- 我的发起 -->
	<div class="layout-padding">
		<basic-container class="layout-padding-auto layout-padding-view">
			<avue-crud
				ref="crud"
				:page="page"
				:data="tableData"
				:permission="permissionList"
				:table-loading="tableLoading"
				:option="tableOption"
				@on-load="getList"
				@search-change="searchChange"
				@refresh-change="refreshChange"
				@size-change="sizeChange"
				@current-change="currentChange"
				@row-update="handleUpdate"
				@row-save="handleSave"
				@row-del="rowDel"
			>
				<template #orderStatus="{ row }">
					<el-tag v-if="row.orderStatus == '0'">未指派</el-tag>
					<el-tag v-if="row.orderStatus == '1'">已指派</el-tag>
					<el-tag type="warning" v-if="row.orderStatus == '2'">处理中</el-tag>
					<el-tag type="warning" v-if="row.orderStatus == '3'">出发中</el-tag>
					<el-tag type="info" v-if="row.orderStatus == '4'">挂起</el-tag>
					<el-tag type="warning" v-if="row.orderStatus == '5'">已到达</el-tag>
					<el-tag type="success" v-if="row.orderStatus == '6'">已处理</el-tag>
					<el-tag type="success" v-if="row.orderStatus == '7'">已解决</el-tag>
					<el-tag type="info" v-if="row.orderStatus == '8'">已关闭</el-tag>
					<el-tag type="info" v-if="row.orderStatus == '9'">已取消</el-tag>
				</template>

				<template #menu="scope">
					<el-button text type="primary" icon="el-icon-chat-line-square" @click="open1(scope.row.orderNo)">投诉</el-button>
					<el-button
						:disabled="scope.row.orderStatus === '0' || scope.row.orderStatus === '1' || scope.row.orderStatus === '2'"
						text
						type="primary"
						icon="el-icon-chat-line-square"
						@click="open2(scope.row.orderNo)"
						>评价</el-button
					>
				</template>
			</avue-crud>
		</basic-container>
		<el-dialog v-if="dialogFormVisible2" v-model="dialogFormVisible2" title="投诉工单" width="38%" @close="dialogFormVisible2 = false">
			<el-form-item label="投诉意见">
				<el-input type="textarea" v-model="complainSug"></el-input>
			</el-form-item>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="closeComplain">取消</el-button>
					<el-button type="primary" @click="handleComplain"> 确定 </el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog v-if="dialogFormVisible3" v-model="dialogFormVisible3" title="评价工单" width="38%" @close="dialogFormVisible3 = false">
			<el-form-item label="满意程度">
				<el-rate v-model="rateValue" :max="5" show-score score-template="{value}分"></el-rate>
			</el-form-item>
			<el-form-item label="评价意见">
				<el-input type="textarea" v-model="confirmSug"></el-input>
			</el-form-item>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="closeAppraise">取消</el-button>
					<el-button type="primary" @click="confirmAppraise"> 确定 </el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import { fetchListMine, getObj, addObj, putObj, delObj, operaOrder, omworderappraise, omwordercomplain } from '/@/api/om/omworder';
import { tableOption } from '/@/const/crud/om/omworderMine.js';
//   import { mapGetters } from 'vuex'
import { useUserInfo } from '/@/stores/userInfo';

export default {
	name: 'omworder',
	data() {
		return {
			searchForm: {},
			tableData: [],
			page: {
				total: 0, // 总页数
				currentPage: 1, // 当前页数
				pageSize: 10, // 每页显示多少条
			},
			tableLoading: false,
			complainSug: '',
			confirmSug: '',
			rateValue: 0,
			tableOption: tableOption,
			dialogFormVisible2: false,
			dialogFormVisible3: false,
			userNameId: '',
		};
	},
	computed: {
		//   ...mapGetters(['permissions', 'userInfo']),/
		permissionList() {
			return {
				//   addBtn: this.validData(this.permissions.om_omworder_add, false),
				//   delBtn: this.validData(this.permissions.om_omworder_del, false),
				//   editBtn: this.validData(this.permissions.om_omworder_edit, false)
			};
		},
	},
	watch: {
		dialogFormVisible3(val) {
			if (!val) {
				this.rateValue = 0;
			}
		},
	},
	created() {
		// 定义变量内容
		const stores = useUserInfo();
		const { userInfos } = storeToRefs(stores);
		// 本地获取个人用户id
		this.userNameId = userInfos.value.user.userId;
	},
	methods: {
		open1(orderNo) {
			this.orderNo = orderNo;
			this.dialogFormVisible2 = true;
		},
		handleComplain() {
			let obj = {
				orderNo: this.orderNo,
				remark: this.complainSug,
				orderStatus: 10 + '',
			};
			operaOrder(obj)
				.then((res) => {
					this.$message.success('工单已投诉');
					this.dialogFormVisible2 = false;
					this.complainSug = '';
					this.getList(this.page);
				})
				.catch((err) => this.$message.error(err));
		},
		closeComplain() {
			this.dialogFormVisible2 = false;
			this.complainSug = '';
		},
		// open2(orderNo) {
		//   this.$prompt('', '评价', {
		//     confirmButtonText: '确定',
		//     cancelButtonText: '取消'
		//   })
		//     .then(({ value }) => {
		//       let obj = {
		//         complainDesc: value,
		//         orderNo
		//       }
		//       omworderappraise(obj)
		//         .then((data) => {
		//           this.$message.success('评价成功')
		//           done()
		//         })
		//         .catch(() => {
		//           loading()
		//         })
		//     })
		//     .catch(() => {})
		// },
		open2(orderNo) {
			this.orderNo = orderNo;
			this.dialogFormVisible3 = true;
		},
		confirmAppraise() {
			let obj = {
				orderNo: this.orderNo,
				evaluation: this.confirmSug,
				satisfaction: this.rateValue + '',
				orderStatus: 7 + '',
			};
			operaOrder(obj)
				.then((res) => {
					this.$message.success('工单已评价');
					this.dialogFormVisible3 = false;
					this.confirmSug = '';
					this.getList(this.page);
				})
				.catch((err) => this.$message.error(err));
		},
		closeAppraise() {
			this.dialogFormVisible3 = false;
			this.confirmSug = '';
		},
		getList(page, params) {
			this.tableLoading = true;
			fetchListMine(
				Object.assign(
					{
						current: page.currentPage,
						size: page.pageSize,
						orderUserId: this.userNameId,
					},
					params,
					this.searchForm
				)
			)
				.then((response) => {
					this.tableData = response.data.records;
					this.page.total = response.data.total;
					this.tableLoading = false;
				})
				.catch(() => {
					this.tableLoading = false;
				});
		},
		rowDel: function (row, index) {
			this.$confirm('是否确认删除ID为' + row.orId, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return delObj(row.orId);
				})
				.then((data) => {
					this.$message.success('删除成功');
					this.getList(this.page);
				})
				.catch((cancelorerror) => {});
		},
		handleUpdate: function (row, index, done, loading) {
			row.applyFile = '';
			putObj(row)
				.then((data) => {
					this.$message.success('修改成功');
					done();
					this.getList(this.page);
				})
				.catch(() => {
					loading();
				});
		},
		handleSave: function (row, done, loading) {
			addObj(row)
				.then((data) => {
					this.$message.success('添加成功');
					done();
					this.getList(this.page);
				})
				.catch(() => {
					loading();
				});
		},
		sizeChange(pageSize) {
			this.page.pageSize = pageSize;
		},
		currentChange(current) {
			this.page.currentPage = current;
		},
		searchChange(form, done) {
			this.searchForm = form;
			this.page.currentPage = 1;
			this.getList(this.page, form);
			done();
		},
		refreshChange() {
			this.getList(this.page);
		},
	},
};
</script>
